<template>
  <div class="contents">
    <el-form :inline="true" label-position="right">
      <el-form-item label="发货日期：">
        <el-date-picker v-model="value1" placeholder="选择日期" type="date" />
      </el-form-item>
      <el-form-item label="商品：">
        <el-input placeholder="请选择" />
      </el-form-item>
      <el-form-item label="搜索：">
        <el-input placeholder="订单号 / 客户" />
      </el-form-item>
      <el-form-item label="客户类型：">
        <el-select v-model="value2" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item style="margin-left: 80px">
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 16px">
      <el-tooltip
        class="item"
        content="需要筛选一个商品后才能进行商品替换"
        effect="dark"
        placement="bottom"
      >
        <el-button disabled>商品替换</el-button>
      </el-tooltip>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="客户名称" prop="date" width="200" />
      <el-table-column label="订单号" prop="name" width="180" />
      <el-table-column label="客户类型" prop="address" />
      <el-table-column label="商品名称" prop="address" />
      <el-table-column label="商品单位" prop="address" />
      <el-table-column label="下单数量" prop="address" />
      <el-table-column label="下单单价" prop="address" />
      <el-table-column label="下单小计" prop="address" />
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes"
      :page-size="20"
      :page-sizes="[20, 30, 50, 100]"
      style="text-align: right"
      :total="0"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        options: [
          {
            value: '0',
            label: '全部',
          },
          {
            value: '1',
            label: '默认客户类型*(市场价)',
          },
          {
            value: '2',
            label: '快餐简餐',
          },
          {
            value: '3',
            label: '粉面馄饨',
          },
          {
            value: '4',
            label: '火锅香锅',
          },
          {
            value: '5',
            label: '地方菜',
          },
          {
            value: '6',
            label: '烤串烤肉',
          },
          {
            value: '7',
            label: '小吃',
          },
          {
            value: '8',
            label: '食堂团餐',
          },
          {
            value: '9',
            label: '其他',
          },
          {
            value: '10',
            label: '人民公社',
          },
        ],
        tableData: [],
      }
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;
  }
</style>
